<template>
  <div class="homepage">
    <van-nav-bar
      title="个人主页"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <Bg>
      <div class="info-box">
        <div class="conten">
          <div>头像</div>
          <div class="img">
            <van-uploader :after-read="afterRead" />
            <img :src="myselfData.userImg" />
          </div>
        </div>
        <div class="conten">
          <div>用户id</div>
          <div class="text">{{ myselfData.userId }}</div>
        </div>
        <div class="conten" @click="changeName">
          <div>昵称</div>
          <div class="text">{{ myselfData.nickName }}</div>
        </div>
        <div class="conten" @click="changeDesc">
          <div>简介</div>
          <div class="text">{{ myselfData.desc | descData }}</div>
        </div>
      </div>
    </Bg>
    <van-popup v-model="showNickName" position="bottom" closeable>
      <div class="nickName">
        <div class="title">修改昵称</div>
        <div class="changeinfo">
          <van-cell-group>
            <van-field label="原昵称" :value="myselfData.nickName" disabled />
            <van-field
              v-model="newNickName"
              label="新昵称"
              placeholder="请输入昵称"
            />
          </van-cell-group>
          <van-button round block type="info" @click="submitNick"
            >提交</van-button
          >
        </div>
      </div>
    </van-popup>
    <van-popup v-model="showdesc" position="bottom" closeable>
      <div class="nickName">
        <div class="title">修改简介</div>
        <div class="changeinfo">
          <van-cell-group>
            <van-field label="原简介" :value="myselfData.desc" disabled />
            <van-field
              v-model="newDesc"
              label="新简介"
              placeholder="请输入简介"
            />
          </van-cell-group>
          <van-button round block type="info" @click="submitDesc"
            >提交</van-button
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import "../assets/less/homepage.less";
import Bg from "../components/Bg.vue";
export default {
  name: "Homepage",
  data() {
    return {
      // 个人信息
      myselfData: [],
      // 显示修改昵称
      showNickName: false,
      // 显示修改简洁
      showdesc: false,
      // 新昵称
      newNickName: "",
      // 新简介
      newDesc: "",
    };
  },
  components: {
    Bg,
  },
  filters: {
    descData(val) {
      if (val) {
        return val;
      } else {
        return "这个家伙很懒，什么也没有留下";
      }
    },
  },
  created() {
    this.inquireMyself();
  },
  methods: {
    // 放回
    onClickLeft() {
      this.$router.go(-1);
    },

    // 查询个人资料数据
    inquireMyself() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "get",
        url: this.baseUrl + "/findAccountInfo",
        params: {
          appkey: this.appkey,
          tokenString: tokenString,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear();
          if (result.data.code == 700) {
            return this.$router.push({ name: "Login" });
          }
          if (result.data.code === "B001") {
            this.myselfData = result.data.result[0];
            console.log(this.myselfData);
          } else {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 显示修个昵称框
    changeName() {
      this.showNickName = true;
    },

    // 显示修改简洁
    changeDesc() {
      this.showdesc = true;
    },

    // 修改昵称
    submitNick() {
      let tokenString = this.$cookies.get("tokenString");

      //当用户未登录的时候跳转到登录页面
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "post",
        url: this.baseUrl + "/updateNickName",
        data: {
          appkey: this.appkey,
          tokenString: tokenString,
          nickName: this.newNickName,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear();
          if (result.data.code === 700) {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }
          if (result.data.code === "C001") {
            this.myselfData.nickName = result.data.nickName;
            this.showNickName = false;
          } else {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 修改简介
    submitDesc() {
      let tokenString = this.$cookies.get("tokenString");

      //当用户未登录的时候跳转到登录页面
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "post",
        url: this.baseUrl + "/updateDesc",
        data: {
          appkey: this.appkey,
          tokenString: tokenString,
          desc: this.newDesc,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear();
          if (result.data.code === 700) {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }
          if (result.data.code === "D001") {
            this.myselfData.desc = result.data.desc;
            this.showdesc = false;
          } else {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },

    // 修改头像
    afterRead(file) {
      if (!file) {
        return;
      }
      console.log(file);
      // console.log(file.file.type)

      let tokenString = this.$cookies.get("tokenString");

      //当用户未登录的时候跳转到登录页面
      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      let imgType = file.file.type.split("/")[1];
      console.log(imgType);
      // console.log(file.content.split('base64,'))
      let serverBase64Img = file.content.split("base64,")[1];
      // console.log(imgType,serverBase64Img)

      this.axios({
        method: "post",
        url: this.baseUrl + "/updateAvatar",
        data: {
          appkey: this.appkey,
          tokenString: tokenString,
          imgType: imgType,
          serverBase64Img: serverBase64Img,
        },
      })
        .then((result) => {
          console.log(result);
          this.$toast.clear();
          if (result.data.code === 700) {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
            return this.$router.push({ name: "Login" });
          }
          if (result.data.code === "H001") {
            this.myselfData.userImg = result.data.result.userImg;
            // this.$router.go(0);
            this.inquireMyself();
          } else {
            this.$toast({
              message: result.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log(err);
        });
    },
  },
};
</script>
